import { makeAutoObservable, runInAction } from 'mobx';
import statisticApi from '../../api/statisticApi';

export default class Statistic {

  loading: boolean;
  taskCountsLoading: boolean;
  counts: any;
  taskCounts: any;
  taskChartOption: any;
  selectedKey: string;
  startDate: string;
  endDate: string;

  constructor() {
    this.loading = false;
    this.taskCountsLoading = false;
    this.counts = {};
    this.taskCounts = {};
    this.selectedKey = 'yesterday';
    this.startDate = '';
    this.endDate = '';
    makeAutoObservable(this);
  }

  async fetchData(keyword: string, parentId: string, pageNumber: number) {
    if (this.loading || this.taskCountsLoading) {
      return;
    }

    runInAction(() => {
      this.loading = true;
    });
    const [res, taskRes] = await Promise.all([
      statisticApi.counts(),
      statisticApi.taskCounts(this.startDate, this.endDate)
    ]);
    const counts: any = (res as any).data || {};
    const taskCounts: any = (taskRes as any).data || {};
    runInAction(() => {
      this.loading = false;
      this.counts = counts;
      this.taskCounts = taskCounts;
      this.createTaskChartOption(taskCounts);
    });
  }

  async fetchTaskCounts() {
    if (this.loading || this.taskCountsLoading) {
      return;
    }

    runInAction(() => {
      this.taskCountsLoading = true;
    });
    const res = await statisticApi.taskCounts(this.startDate, this.endDate);
    const taskCounts: any = (res as any).data || {};
    runInAction(() => {
      this.taskCountsLoading = false;
      this.taskCounts = taskCounts;
      this.createTaskChartOption(taskCounts);
    });
  }

  createTaskChartOption(taskCounts: any) {
    if (!taskCounts.dates) {
      this.taskChartOption = {
        graphic: {
          invisible: false,
          type: 'text',
          left: 'center',
          top: 'middle',
          silent: true,
          style: {
            fill: '#9d9d9d',
            fontWeight: 'bold',
            text: '暂无数据',
            fontSize: '25px'
          }
        },
        tooltip: {
          show: false
        },
        legend: {
          show: false,
          data: []
        },
        grid: {
          show: false
        },
        xAxis: {
          show: false,
          data: []
        },
        yAxis: {
          show: false
        },
        series: [
          {
            type: 'pie',
            radius: ['0%', '0%'],
            data: []
          }
        ],
        dataZoom: [
          {
            show: false,
            type: 'inside'
          },
          {
            show: false,
            type: 'slider'
          }
        ]
      };
      return;
    }

    if (taskCounts.dates.length > 1) {
      this.taskChartOption = {
        graphic: {
          invisible: true
        },
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        legend: {
          show: true,
          data: ['任务', '任务明细', '已创建', '已开始', '已结束', '产生错误'],
          orient: 'horizontal',
          x: 'center',
          y: 'top'
        },
        grid: {
          show: true,
          left: '2%',
          right: '2%',
          top: '10%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          show: true,
          type: 'category',
          boundaryGap: true,
          data: taskCounts.dates
        },
        yAxis: {
          show: true,
          type: 'value',
          minInterval: 1
        },
        series: [
          {
            show: true,
            name: '任务',
            color: '#5573d6',
            type: 'bar',
            barWidth: '20%',
            data: taskCounts.taskCounts
          },
          {
            show: true,
            name: '任务明细',
            color: '#49a7da',
            type: 'bar',
            barWidth: '20%',
            data: taskCounts.counts
          },
          {
            show: true,
            name: '已创建',
            color: '#505c70',
            type: 'line',
            smooth: true,
            data: taskCounts.createdCounts
          },
          {
            show: true,
            name: '已开始',
            color: '#7360ab',
            type: 'line',
            smooth: true,
            data: taskCounts.startedCounts
          },
          {
            show: true,
            name: '已结束',
            color: '#65bb97',
            type: 'line',
            smooth: true,
            data: taskCounts.endedCounts
          },
          {
            show: true,
            name: '产生错误',
            color: '#f29d5c',
            type: 'line',
            smooth: true,
            data: taskCounts.errorCounts
          }
        ],
        dataZoom: [
          {
            show: true,
            type: 'inside',
            xAxisIndex: 0
          },
          {
            show: true,
            type: 'slider',
            xAxisIndex: 0
          }
        ]
      };
    } else {
      this.taskChartOption = {
        graphic: {
          invisible: false,
          type: 'text',
          left: 'center',
          top: 'bottom',
          silent: true,
          style: {
            fill: '#666666',
            fontWeight: 'normal',
            text: `任务总数: ${taskCounts.taskCounts[0]}  \n\n任务明细: ${taskCounts.counts[0]}`,
            fontSize: '14px'
          }
        },
        tooltip: {
          show: true,
          trigger: 'item'
        },
        legend: {
          show: true,
          data: ['已创建', '已开始', '已结束', '产生错误'],
          orient: 'horizontal',
          x: 'center',
          y: 'top'
        },
        grid: {
          show: false
        },
        xAxis: {
          show: false,
          data: []
        },
        yAxis: {
          show: false
        },
        series: [
          {
            name: '同步任务',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 10,
              color: (colors: any) => ['#505c70', '#7360ab', '#65bb97', '#f29d5c'][colors.dataIndex]
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                color: '#666666',
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                name: '已创建',
                color: 'red',
                value: taskCounts.createdCounts[0]
              },
              {
                name: '已开始',
                value: taskCounts.startedCounts[0]
              },
              {
                name: '已结束',
                value: taskCounts.endedCounts[0]
              },
              {
                name: '产生错误',
                value: taskCounts.errorCounts[0]
              }
            ]
          }
        ],
        dataZoom: [
          {
            show: false,
            type: 'inside',
            start: taskCounts.dates[0],
            end: taskCounts.dates[taskCounts.dates.length - 1]
          },
          {
            show: false,
            type: 'slider',
            start: taskCounts.dates[0],
            end: taskCounts.dates[taskCounts.dates.length - 1]
          }
        ]
      };
    }
  }

  setSelectedKey(selectedKey: string) {
    runInAction(() => {
      this.selectedKey = selectedKey;
    });
  }

  setDates(startDate: string, endDate: string) {
    runInAction(() => {
      this.startDate = startDate;
      this.endDate = endDate;
    });
  }

};
